前言

嗨，我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我，進而獲得更多資訊唷！

未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文、英文、日文、簡體中文
觀看分類：React 白話文運動、其他系列

如果想要快速查找其他文章請點選目錄

成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人，
都可以透過 Hogan.tech 嘗試進入程式領域。

前一篇與大家介紹另一個狀態管理的概念 Flux

1. Flux 起源
2. Flux 概念與組成

這一篇則是介紹透過Flux概念，形成的React 狀態管理 - Redux

1. 複習Flux
2. Redux 概念
3. Redux 組成

複習Flux

這邊偷懶一下，直接附上前一篇Flux 的概念

Flux 本身是一個單項資料流，透過Action、Dispatcher、Store、View 所組成，相較於MVC 定義三種不同角色的關係，Flux 比較像是清楚定義資料進行的方式。

Flux 組成

• Actions
  • Helper methods that facilitate passing data to the Dispatcher
• Dispatcher
  • Receives actions and broadcasts payloads to registered callbacks
• Stores
  • Containers for application state & logic that have callbacks registered to the dispatcher
• Controller Views&View
  • React Components that grab the state from Stores and pass it down via props to child components.

Actions：規範改變資料的動作

Dispatcher：將目前發生的行為，告知已註冊的Store

Stores：存放資料以及邏輯，並且只提供call back funciton 來註冊 dispatcher

Views：根據Store狀態，渲染UI 以及監聽使用者的操作

這裡附上一張自己用Miro 畫出來的流程圖

在Flux 架構上，如果需要修改Store，則需要透過已設定好的流程來去做改變，而非直接去做修改

舉例來說，我們可以透過Clinet 端的event 去送出Custom event，再由 Custom event 去修改Store裡面的狀態

Redux 概念

目前此系列，已經有講解過一些React狀態管理，Props、Context、Flux，而Redux就是基於Flux單向資料流產生出來的工具，不過因為本身有些難度，所以這邊我會盡量更白話的方式做講解

Redux 的一些基本的原則

1. （previousState, action）⇒ newState

透過 「舊的狀態以及動作」會產生出一個「新的狀態」

2. Single Source of Truth

所有的元件狀態都只會有單一來源

3. State is Read-Only

在Store 的狀態只能做讀取，不能直接做修改

4. Changes are Made with Pure Reducer Functions

必須要使用Reducer（Pure Function）來才可以做修改

這邊可以看一下流程圖

附上引用來源：https://www.slideshare.net/nikgraf/react-redux-introduction

其中Store 的作用為，與所有元件進行狀態管理，透過下圖可以知道

如果今天有一個元件要進行狀態的改變，則只需要透過Stroe去做互動就可以

而非原本的props 在父元件或是子元件來回做傳遞

附上引用來源：https://www.slideshare.net/nikgraf/react-redux-introduction

Redux 組成

看過流程圖後，會知道Redux 與Flux 相近，都會有一些角色負責自己的職責，這邊也一一做介紹

以下也都是參考 Redux 官方文件，並附上一些概念圖

What is the Redux Store?

The global state of an application is stored in an object tree within a single store

Store 是用來儲存狀態的地方，只能做讀取，且整個應用程式只會有一個Store 物件

What Are Actions in Redux?

The only way to change the state is to emit an action, which is an object describing what happened

要修改狀態唯一的方式為，觸發一個Action，並且描述發生了什麼事

What Are Reducers in Redux?

To specify how the state tree is transformed by actions, we write pure reducers

（previousState, action）⇒ newState

Reducer 本身是一個純函式（pure function），透過 「舊的狀態以及動作」會產生出一個「新的狀態」

結語

這一篇講解了Redux的概念以及流程

不過Redux本身也是一個比較難理解的概念

歡迎讀者可以收藏此文章，方便之後做複習

如果有任何建議與疑問也歡迎留言！

如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～